import React ,{useEffect,useState,memo}from 'react';
import {useHistory} from 'react-router';
import {connect} from 'react-redux';
import {topicDetail,topicRelated,topicLeave} from '../../../store/actions';
import style from './index.module.scss';
import Header from '../../../components/Header';
import title from '../../../components/title';
const WrapHeader = memo(Header);
const Wraptitle = memo(title);

const Topic:React.FC = (props:{[key:string]:any})=>{
    const history = useHistory();
    const{match:{params:{id}}} = props;
    const [flag,setFlag] = useState(false);
    useEffect(()=>{
        props.getInfo(id,'1','1','5')
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[id])
    const changeFlag = ()=>{
        setFlag(!flag);
        if(flag) return props.getInfo(id,'1','1','5');
        props.getInfo(id,'1','1',props.leaveInfo.count);
    }
    return <div className={style.detail}>
        <WrapHeader title={props.detailInfo.title}/>
        <div className={style.content}>
            <div dangerouslySetInnerHTML={{__html:props.detailInfo.content}}></div>
            <div className={style.word}>
                <div className={style.title}>
                    <div>精选留言</div>
                    <div><i className="iconfont icon-bianji1" onClick={()=>history.push({pathname:'/leave',state:{id}})} /></div>
                </div>
                <div className={style.wordContent}>
                    {
                        props.leaveInfo.data&&props.leaveInfo.data.map((item:any)=>{
                            return <div className={style.leaveItem} key={item.id}>
                                <p>
                                    <span>
                                        {
                                            Object.keys(item.user_info).length>0
                                            ?
                                            ''
                                            :
                                            '匿名用户'
                                        }
                                    </span>
                                    <span>{item.add_time}</span>
                                </p>
                                <p>{item.content}</p>
                            </div>
                        })
                    }
                </div>
                <div className={style.look}>
                    <span onClick={changeFlag}>
                        {
                            flag
                            ?
                            '收起更多评论'
                            :
                            '查看更多评论'
                        }
                    </span>
                </div>
            </div>
            <Wraptitle title="推荐专题" />
            <div className={style.related}>
                {
                    props.relatedList
                    ?
                    props.relatedList&&props.relatedList.map((item:any)=>{
                        return <dl 
                            className={style.relatedItem} 
                            key={item.id}
                            onClick={()=>history.push(`/topicDetail/${item.id}`)}
                            >
                            <dt><img src={item.scene_pic_url} alt=""/></dt>
                            <dd>{item.title}</dd>
                        </dl>
                    })
                    :
                    null
        }
            </div>
        </div>
    </div>
}

const mapStateToProps=(state:any)=>{
    return state.topic
}
const mapDispatchToProps=(dispatch:Function)=>{
    return {
        getInfo:(id:number,typeId?:string,page?:string,size?:string)=>{
            dispatch(topicDetail(id));
            dispatch(topicRelated(id));
            dispatch(topicLeave(`${id}`,typeId,page,size));
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Topic) 
